<template>
  <a-modal :confirmLoading="confirmLoading" :maskClosable="false" :visible="visible" :width="800" @cancel="handleCancel" @ok="handleOk" :title="'编号:'+record.childid">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="编号" v-decorator="['record.childid', {initialValue: record.childid }]">
          <span>{{record.childid}} </span>
        </a-form-item>
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="孩子姓名">
          <span>{{record.name}} </span>
        </a-form-item>
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="孩子身份证号">
          <span>{{record.idcardno}} </span>
        </a-form-item>
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="家长姓名(关系)">
          <span>{{record.parentName + '(' + record.parentType+  ')'}} </span>
        </a-form-item>
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="家长手机号">
          <span>{{record.mobile}} </span>
        </a-form-item>
        <a-form-item style="margin-top:10px;" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="审核状态">
          <a-radio-group @change="onChangeStatus"  v-decorator="['record.status', {initialValue: record.status }]">
            <!-- <a-radio-button value='0' :disabled="beforeStatus==0">未审核</a-radio-button> -->
            <a-radio-button value='1' :disabled="beforeStatus==1">审核通过</a-radio-button>
            <a-radio-button value='2' :disabled="beforeStatus==2">审核未通过</a-radio-button>
            <!-- <a-radio-button value='4' :disabled="beforeStatus==4">申请取消</a-radio-button> -->
          </a-radio-group>
        </a-form-item>
        <!-- <a-row>
                                    <a-col :offset="16" :span="5">{{record.gmtCreate | formatDate}}</a-col>
                                  </a-row> -->
        <a-card title="户口本首页"><img :src="record.indexImgurl" style="width:100%;height:100%;" /></a-card>
        <a-card title="户口本主页"><img :src="record.masterImgurl" style="width:100%;height:100%;" /></a-card>
        <a-card title="户口本孩子页"><img :src="record.childImgurl" style="width:100%;height:100%;" /></a-card>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import {
    updateChild
  } from "@/api/child";
  export default {
    name: "QuestionModal",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      record: {
        type: Object
      },
    },
    data() {
      return {
        confirmLoading: false,
        beforeStatus: "",
        mdl: {},
        form: this.$form.createForm(this)
      };
    },
    beforeCreate() {
      //this.form = this.$form.createForm(this);
      console.log("form::", this.form);
    },
    created() {},
    mounted() {
      this.beforeStatus = this.record.status;
    },
    methods: {
      onChangeStatus(e) {
        console.log(`checked = ${e.target.value}`)
        this.record.status = e.target.value;
      },
      close() {
        this.$emit("close");
        this.$emit("update:visible", false);
      },
      handleOk() {
        console.log("handleOk:");
        console.log("status:" + this.record.status);
        const _this = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          // 验证表单没错误
          if (!err) {
            values.record.childid = this.record.childid;
            console.log("form values", JSON.stringify(values));
            _this.confirmLoading = true;
            // 模拟后端请求 2000 毫秒延迟
            updateChild(values.record)
              .then(res => {
                console.log(res);
                _this.$message.success("提交成功");
                _this.$emit("ok");
                _this.confirmLoading = false;
                _this.$emit("refreshTable");
                _this.close();
              })
              .catch(err => {
                console.log(err);
                _this.$emit("ok");
                _this.confirmLoading = false;
              });
          }
        });
      },
      handleCancel() {
        console.log("取消.");
        this.$emit("refreshTable");
        this.close();
      }
    },
    filters: {
      formatDate(timestamp) {
        return new Date(timestamp).toLocaleString();
      }
    }
  };
</script>